<!DOCTYPE html>
<html>
<head>

<title>
School Info
</title>

<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="generator" content="Wufoo.com" />

<!-- CSS -->
<link rel="stylesheet" href="../css/structure.css" type="text/css" />
<link rel="stylesheet" href="../css/form.css" type="text/css" />

<!-- JavaScript -->
<!--<script type="text/javascript" src="scripts/wufoo.js"></script> -->

<!--[if lt IE 9] -->
<!--<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> -->
<!--[endif]-->
<!--/head-->
  <script type="text/javascript">

function loadCountry(){
	  alert("loadcountry");
	var xhttp=false;
	if (window.XMLHttpRequest)
	  {
	  xhttp=new XMLHttpRequest();
	  }
	else // for IE 5/6
	  {
	  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
//    var country=document.getElementById('Field102').value;
    xhttp.open("POST","/FetchAllCountriesServlet",true);
	xhttp.send();
	xhttp.onreadystatechange=handleServerResponseforCountry(xhttp);

}



function handleServerResponseforCountry(xmlHttpRequest) {
	
    	return function(){
		if (xmlHttpRequest.readyState == 4) {
		
			if (xmlHttpRequest.status == 200) {

              // Var is a big string with ,country1,country2,country3...etc
				// Want to seperate into 3 variables with var1 = country1, var2 = country2, var3 = country3			
				var countryString = xmlHttpRequest.responseText;
				breakupString(countryString,'countrylist' );
              }
			else {
				alert("Error during AJAX call. Please try again");
			}
		}
	}

}
function insertOptionBefore(text1, text2)
{
 var elSel = document.getElementById(text2);
  document.getElementById(text2).style.display='block';
  if (elSel.selectedIndex >= 0) {
    var elOptNew = document.createElement('option');
    elOptNew.text =  text1;
    elOptNew.value = text1;
    
    var elOptOld = elSel.options[elSel.selectedIndex];  
    try {
      elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
    }
    catch(ex) {
      elSel.add(elOptNew, elSel.selectedIndex); // IE only
    }
  }
}


function breakupString (breakString, idString){

	//word[0] contains "Welcome", word[1] contains "to" etc
	var brokenString = breakString.split(",");
	for (i = 1; i < brokenString.length; i++)
	{	
		insertOptionBefore(brokenString[i],idString);
	}
		

}


function loadState(){
	var xhttp=false;
	if (window.XMLHttpRequest)
	  {
	  xhttp=new XMLHttpRequest();
	  }
	else // for IE 5/6
	  {
	  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
//    var country=document.getElementById('Field102').value;
    xhttp.open("POST","/FetchAllStatesServlet",true);
	xhttp.send();
	xhttp.onreadystatechange=handleServerResponseforState(xhttp);
}



function handleServerResponseforState(xmlHttpRequest) {
	
	return function(){
		if (xmlHttpRequest.readyState == 4) {
		
			if (xmlHttpRequest.status == 200) {
				var stateString = xmlHttpRequest.responseText;
				breakupString(stateString,'statelist' );
			}
			else {
				alert("Error during AJAX call. Please try again");
			}
		}
	}

}

function deleteDatabase()
{
	alert("delete");
	var xhttp=false;
	if (window.XMLHttpRequest)
	  {
	  xhttp=new XMLHttpRequest();
	  }
	else // for IE 5/6
	  {
	  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
//    var country=document.getElementById('Field102').value;
    xhttp.open("POST","/DeleteEntityServlet",true);
	xhttp.send();
	xhttp.onreadystatechange=handleServerResponseforDelete(xhttp);
}

function handleServerResponseforDelete(xmlHttpRequest) {
	
	return function(){
		if (xmlHttpRequest.readyState == 4) {
		
			if (xmlHttpRequest.status == 200) {
				alert(xmlHttpRequest.responseText);
			}
			else {
				alert("Error during AJAX call. Please try again");
			}
		}
	}

}

function findStatebyprefix()
{

	var xhttp=false;
	if (window.XMLHttpRequest)
	  {
	  xhttp=new XMLHttpRequest();
	  }
	else // for IE 5/6
	  {
	  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
    var stateprefix=document.getElementById('statebox').value;
    xhttp.open("POST","/FindStateByPrefix?stateletters="+stateprefix,true);
	xhttp.send();
	xhttp.onreadystatechange=handleServerResponseforfindStatebyprefix(xhttp);
}

function handleServerResponseforfindStatebyprefix(xmlHttpRequest) {
	
	return function(){
		if (xmlHttpRequest.readyState == 4) {
		
			if (xmlHttpRequest.status == 200) {
			//	alert(xmlHttpRequest.responseText);
			}
			else {
				alert("Error during AJAX call. Please try again");
			}
		}
	}

}



function load()
{
	alert("load");
}
</script>
</head>

<body id="public"  onload="load()">

	
	
<div id="container">
<!--<form action = "/addUserToDatabase" id="form125" class="wufoo topLabel page" autocomplete="off" enctype="multipart/form-data" method="post" action="#public" novalidate> -->
<!--<form action="/SchoolInfoServlet" method="post" id="form125"> -->
<form action="/AddPlaceInfoInfoServlet" method="post" id="form125"  > 

	<h2>Add Country and State to Database</h2>



<ul>

<li id="foli102" 		class="     ">
	<label class="desc" id="title102" for="Field102">
		Country:
	</label>
	<span>
		<input id="Field102" 			name="country" 			type="text" 			class="field text fn" 			value="" 			size="8" 			tabindex="1" 									/>
	</span>

</li>	

<li id="foli102" 		class="     ">
	<label class="desc" id="title102" for="Field102">
		State:
	</label  >

	<span>
		<input id="Field102" 			name="state" 			type="text" 			class="field text fn" 			value="" 			size="8" 			tabindex="1" 									/>
	</span>
	
</li>	



</ul>

	<input type="submit" value="Upload to Database">

</form>
<p id ="country"> Country Data Display </p>

<button type="button" onclick="loadCountry()">Load Country Database</button>


	<select id="countrylist" name="country" size="1"  style="display:none">
	<option value=" " selected="selected"> country </option>

	</select>
<!-- textarea id=countrylist rows="10" cols="20"  -->
<!--  /textarea-->

<p id ="state"> State Data Display </p>


<button type="button" onclick="loadState()">Load State Database</button>


	<select id="statelist" name="state" size="1"  style="display:none" >
	<option value=" " selected="selected"> States </option>

	</select>
<!-- textarea id=statelist rows="10" cols="20"-->
<!-- /textarea-->

<button type="button" onclick="deleteDatabase()">Delete Place Database</button>
</div><!--container-->

<button type="button" onclick="breakupString(',US,China,India')">Debug</button>

<!--<h2>AJAX</h2>-->
<!--<form id=”autofillform”  method=”get”>-->
<!--<table border=”0″ cellpadding=”5″ cellspacing=”0″>-->
<!--<tr>-->
<!--<td><b>Name:</b></td>-->
<!--<td><input type=”text” size=”20″ autocomplete=”off” id=”complete-field” name=”id” onkeyup=”doCompletion();”></td>-->
<!--</tr>-->
<!--<tr><td id=”auto-row” colspan=”2″> <td/></tr>-->
<!--</table>-->
<!--</form>-->
<!--<div style=”position: absolute; top:165px;left:70px;” id=”menu-popup”>-->
<!--<table id=”completeTable” border=”1″ bordercolor=”black” cellpadding=”0″ cellspacing=”0″ />-->
<!--</div>-->

</body>
</html>